<template>
  <h2>本地的 todo list 代办清单</h2>
  <el-button @click="addFF">创建</el-button>
  <el-table :data="todoList" style="width: 100%" type="index">
     <el-table-column prop="content" label="内容" width="180"></el-table-column>
     <el-table-column prop="date" label="时间" width="180"></el-table-column>
     <el-table-column prop="operation" label="操作" width="180">
       <template #default="{ row, $index }">
       <el-button type="danger" @click="delFF($index)">删除</el-button>
       <el-button type="primary" @click="editFF(row, $index)">编辑</el-button>
     </template>
     </el-table-column>
   </el-table>
 
 <!-- 弹框   -->
 <el-dialog v-model="ShowDialog"  :title="form.id?'修改代办':'添加代办'" >
       <el-form ref="formRef" :model="form"  size="small" label-width="100px"
         label-position="left">
         <el-form-item label="内容" prop="content">
           <el-input v-model="form.content" placeholder="请输入内容" clearable :style="{width: '100%'}"></el-input>
         </el-form-item>
         <el-form-item label="时间" prop="date">
          <el-date-picker v-model="form.date" type="date" placeholder="请选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
         </el-form-item>
       </el-form>
       <div slot="footer">
         <el-button type="primary" @click="confirm" >添加</el-button>
       </div>
     </el-dialog>
  
 
 
 
 </template>
 
 <script>
 export default {
   name: 'app',
   components: {},
   data() {
     return {
   todoList: [],
   ShowDialog:false,
   form: {
         content: '',
         date: null,
       }
     }
   },

   methods: {
     // 新增
     addFF(){ 
     this.ShowDialog=true
     },
     //  添加按钮
     confirm(index) {
      if (!index) {
        this.todoList.unshift({...this.form})
      }else{
        this.todoList[index]= { ...this.form }
      }
        
    
        localStorage.setItem('todoList',JSON.stringify(this.todoList))
         this. ShowDialog=false 
         this.form= {
        content: '',
        date: null,
       }  
     },
     // 删除
     delFF(index){
     this.todoList.splice(index,1)
     
     },
     
     // 编辑
     editFF(row, index){
     this.ShowDialog=true
     this.form.content=row.content
     this.form.date=row.date
     },
    
  
    
     
   }
 }
 </script>
 
   <style scoped lang="scss">
 
   </style>
 